<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米框架模型</title>
		<style>
			*{    /* 通配符:初始化所有标签的内边距和外边距 */
				margin: 0;
				padding: 0;
				}
			.x{
				width: 1250px;
				height: 40px;
				border: 1px solid pink;
				background-color: black;
			}
			.H{
			width: 100%;
				height: 20px;
				border: 1px solid white;
				
			}
			.A{
				width: 1210px;
				height: 80px;
				border: 1px solid green;
				padding: 20px;
				display: flex;
			}
			.z{
				width: 80px;
				height: 50px;
				border: 1px solid pink;	
			}
			.c{
				width: 800px;
				height: 50px;
				border: 1px solid pink;
				margin-left: 20px;
				margin-right: 80px;
			}
			.a{
				width: 180px;
				height: 50px;
				border: 1px solid pink;
			}
			.Q{
				width: 1250px;
				height: 100px;
				border: 1px solid black;
				
			}
			.w{
				width: 200px;
				height: 100px;
				border: 1px solid pink;
			}
			.M{
				width: 1250px;
				height: 150px;
				border: 1px solid red;
				display: flex;
				padding-top: 40px;
			}
			.n{
				width: 200px;
				height: 100px;
				border: 1px solid pink;
				margin-right: 100px;
			}
			.b{
				width: 180px;
				height: 100px;
				border: 1px solid pink;
				margin-right: 100px;
			}
			.D{
				width: 1250px;
				height: 410px;
				border: 1px solid green;
				display: inline-flex;
			}
			.d{
				width: 200px;
				height: 406px;
				margin-right: 100px;
				border: 1px solid red;
			}
			.r{
				width: 200px;
				height: 200px;
				display: ;
				margin-right: 40px;
				
			}
			a{
				height: 200px;
				width: 200px;
				display: inline-block;
				border: solid 1px black;
				
			}
		</style>
	</head>
	<body>
		<div class="x"></div>
		<div class="H"></div>
		
		<div class="A">
			<div class="z"></div>
			<div class="c"></div>
			<div class="a">
				<span></span><input type="text"  placeholder=""/>
			</div>
		</div>
		<div class="H"></div>
		
		<div class="Q">
			<div class="w"></div>
		</div>
		<div class="H"></div>
		
		<div class="M">
			<div class="n"></div>
			<div class="b"></div>
			<div class="b"></div>
			<div class="b"></div>
		</div>
		
		<div class="H"></div>
		<div class="x"></div>
		<div class="H"></div>
		
		<div class="D">
			<div class="d"></div>
			<div class="r">
				<a href=" "></a>
				<a href=" "></a>	
			</div>
			<div class="r">
				<a href=" "></a>
				<a href=" "></a>	
			</div>
			<div class="r">
				<a href=" "></a>
				<a href=" "></a>	
			</div>
			<div class="r">
				<a href=" "></a>
				<a href=" "></a>	
			</div>
		</div>
	</body>
</html>
